<template>
	<div class="app-container">
		<jk-table
			border
			:stripe="false"
			:data="tableData.topFiveList"
			:height="tableHeight - 50"
		>
			<vxe-column
				v-for="(item, index) in tableColumnList"
				:key="index"
				:title="item.title"
				:align="item.align"
				:field="item.keyName"
				:sortable="item.sortable"
				:fixed="item.fixed ? item.fixed : ''"
				:min-width="item.minWidth"
				:width="item.width"
			>
				<template v-if="item.keyName === 'productList'" slot="header">
					<el-row :gutter="24">
						<el-col :span="9">品种</el-col>
						<el-col :span="9">批号</el-col>
						<el-col :span="6">产量</el-col>
					</el-row>
				</template>
				<template slot-scope="scope">
					<span v-if="item.keyName === 'productList'">
						<el-row
							v-for="(batchItem, batchIndex) in scope.row.productList"
							:key="batchIndex"
							:gutter="24"
						>
							<el-col :span="9"><span>{{ batchItem.productName || '无' }}</span></el-col>
							<el-col :span="9"><span>{{ batchItem.batchCode || '无' }}</span></el-col>
							<el-col :span="6"><span>{{ batchItem.allQty || null }}</span></el-col>
						</el-row>
					</span>
					<span v-else-if="item.keyName === 'machineEfficiency'">{{ scope.row.machineEfficiency }}%</span>
					<span v-else>{{ scope.row[item.keyName] }}</span>
				</template>
			</vxe-column>
		</jk-table>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-table-height';
    import { pageConfig, formatMonth, formatDate, tipsBar } from '/src/utils/jk/jk-tool';
    import getMenuColumn from '../../../../mixins/getMenuColumn';
    import handlerCache from '../../../../mixins/handler-cache';
    export default {
        name: 'PrdReport',
        components: {},
        mixins: [calHeight, getMenuColumn, handlerCache],
        props: {
            tableData: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
            };
        },
        mounted() {
            this.getMenuColumnListRequest();
        },
        methods: {
        }
    };
</script>
<style>
.machine-group-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: solid 1px #eee;
    border-top: solid 1px #eee;
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
    flex-shrink: 0;
}
</style>
